<template>
	<div id="main">
		<div class="hand_div">
			<img src="../assets/scr/头部.png" />
		</div>
		<div class="title_div">
			<i class="el-icon-location-outline"></i>
			北京理工大学国防科技园2号楼10层
			<i class="el-icon-bell"></i>
		</div>
		<div class="input_div">
			<img src="../assets/Main/sousuo.png" />
			<input placeholder="山姆会员商店优惠商品" />
		</div>
		<div class="img_div">
			<img src="../assets/Main/1111.png" />
		</div>
		<div class="body_div">
			<el-row :gutter="83">
				<el-col :span="8" v-for="item in dataList">
					<div class="grid-content bg-purple">
						<div class="tab_div">
							<img :src="item.url" />
							<p>{{item.name}}</p>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="fjx_div"></div>
		<div class="">
			<div class="bottom_top_div">
				附近店铺
			</div>
			<div class="bottom_bottom_div" v-for="item in dianpuList">
				<div class="bottom_bottom_left_div">
					<img :src="item.url" />
				</div>
				<div class="bottom_bottom_right_div">
					<div class="bottom_bottom_right_top_div">
						<span>{{item.dpname}}</span>
					</div>
					<div class="bottom_bottom_right_model_div">
						<div class="bottom_bottom_right_model_top_div">
							<span>{{item.ys}}</span>
						</div>
						<div class="bottom_bottom_right_model_model_div">
							<span>{{item.qs}}</span>
						</div>
						<div class="bottom_bottom_right_model_bottom_div">
							<span>{{item.yunfen}}</span>
						</div>
					</div>
					<div class="bottom_bottom_right_bottom_div">
						<span>{{item.VIP}}</span>
					</div>
				</div>
				<div class="bottom"></div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [{
						url: require("../assets/Main/超市@2x.png"),
						name: "超市便利"
					},
					{
						url: require("../assets/Main/菜市场@2x.png"),
						name: "菜市场"
					},
					{
						url: require("../assets/Main/水果店@2x.png"),
						name: "水果店"
					},
					{
						url: require("../assets/Main/鲜花@2x.png"),
						name: "鲜花绿植"
					},
					{
						url: require("../assets/Main/医药健康@2x.png"),
						name: "医药健康"
					},
					{
						url: require("../assets/Main/家居@2x.png"),
						name: "家居时尚"
					},
					{
						url: require("../assets/Main/蛋糕@2x.png"),
						name: "烘焙蛋糕"
					},
					{
						url: require("../assets/Main/签到@2x.png"),
						name: "签到"
					},
					{
						url: require("../assets/Main/大牌免运@2x.png"),
						name: "大牌免运"
					},
					{
						url: require("../assets/Main/红包@2x.png"),
						name: "红包套餐"
					}
				],
				dianpuList: [{
						url: require("../assets/Main/woerma.png"),
						dpname: "沃尔玛",
						ys: "月售1万+",
						qs: "起送¥0",
						yunfen: "基础运费¥5",
						VIP: "VIP尊享满89元减4元运费券（每月3张）"
					},
					{
						url: require("../assets/Main/shanmu.png"),
						dpname: "山姆会员商店",
						ys: "月售2千+",
						qs: "起送¥0",
						yunfen: "基础运费¥5",
						VIP: "联合利华洗护满10减5"
					}
				]
			}
		}
	}
</script>

<style lang="less" scoped>
	#main {
		background-color: white;
		height: 100%;
		width: 100%;
		position: fixed;
	}

	.hand_div {
		img {
			height: 20px;
			width: 100%;
		}
	}

	.title_div {
		height: 54px;
		font-size: 16px;
		color: #333333;
		line-height: 54px;
		text-align: center;

		:nth-child(1) {
			height: 16.2px;
			width: 13.1px;
			padding-left: 7px;
			padding-right: 8px;
		}

		:nth-child(2) {
			height: 14.7px;
			width: 16.5px;
			padding-left: 40px;
			padding-right: 9px;
		}
	}

	.input_div {
		margin-left: 18px;
		margin-right: 18px;
		display: flex;
		background-color: #F5F5F5;
		border-radius: 16px;

		img {
			height: 16px;
			width: 15.9px;
			padding-top: 8px;
			padding-bottom: 8px;
			padding-left: 16px;
			padding-right: 12.1px;
		}

		input {
			border-radius: 16px;
			background-color: #F5F5F5;
			color: #B7B7B7;
			font-size: 14px;
			flex: 1;
			height: 32px;
			border: none;
		}
	}

	.img_div {
		margin-top: 12px;
		padding-left: 18px;
		padding-right: 18px;

		img {
			width: 339px;
			height: 86px;
		}
	}

	.body_div {
		height: 174px;
	}

	.tab_div {
		margin-left: 14px;
		margin-right: 14px;
		float: left;

		p {
			font-size: 12px;
			color: #333333;
			text-align: center;
		}
	}

	.tab_div img {
		width: 40px;
		height: 40px;
		padding-top: 16px;
	}

	.fjx_div {
		height: 10px;
		width: 100%;
		background-color: #F1F1F1;

	}

	.bottom_top_div {
		margin-top: 16px;
		margin-left: 18px;
		color: #333333;
		font-size: 18px;
	}

	.bottom_bottom_div {
		border-style: 0 0 solid 1px 0;
	}

	.bottom_bottom_left_div {
		img {
			height: 56px;
			width: 56px;
			padding-left: 18px;
			float: left;
			margin-top: 14px;
			margin-right: 16px;
		}
	}

	.bottom_bottom_right_top_div {
		padding-top: 14px;


		span {
			height: 22px;
			width: 100%;
			font-size: 16px;
			color: #333333;

		}
	}

	.bottom_bottom_right_model_div {
		height: 34px;
		line-height: 34px;
	}

	.bottom_bottom_right_model_top_div {
		float: left;
		display: flex;

		padding-right: 16px;

		span {
			color: #333333;
			font-size: 13px;
		}
	}

	.bottom_bottom_right_model_model_div {
		float: left;
		padding-right: 16px;

		span {
			color: #333333;
			font-size: 13px;
		}
	}

	.bottom_bottom_right_model_bottom_div {
		float: left;

		span {
			color: #333333;
			font-size: 13px;
		}
	}

	.bottom_bottom_right_bottom_div {
		float: left;
		padding-left: 90px;

		span {

			color: #E93B3B;
			font-size: 13px;
		}
	}

	.bottom {
		height: 24px;
		width: 100%;
	}
</style>
